<template>
    <div class="order-list-view view-container">
        <div class="main-content">
            <div class="list-container">

                <div>
                    <el-form
                            label-width="100px"
                            :inline="true"
                            :model="formData"
                            label-position="right"
                            size="small"
                            class="filter-form-inline"
                    >
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-form-item label="订单状态" style="width: 100%">
                                    <el-select
                                            v-model="formData.orderStatus"
                                            clearable
                                            style="width: 100%"
                                            placeholder="请选择订单状态"
                                            @change="listSearch"
                                    >
                                        <el-option
                                                v-for="(item, idx) in orderStatus"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="职责" style="width: 100%">
                                    <el-select
                                            v-model="formData.selectType"
                                            clearable
                                            style="width: 100%"
                                            placeholder="职责"
                                            @change="selectChange"
                                    >
                                        <el-option
                                                v-for="(item, idx) in selects"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                        />
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :span="4">
                                <el-form-item style="width: 100%">
                                    <more-search-btn v-model:is-more="visible" style="margin-left:10px"/>
                                </el-form-item>
                            </el-col>

                            <el-col :span="6">
                                <el-form-item style="width: 100%">
                                    <el-button
                                            class="border-btn"
                                            @click="orderReset"
                                    >重置</el-button>
                                    <el-button
                                            type="primary"
                                            class="main-btn"
                                            @click="listSearch"
                                    >搜索</el-button>
                                </el-form-item>
                            </el-col>

                            <template v-if="visible">
                                <el-col :span="6" v-if="formData.selectType != 1">
                                    <el-form-item label="负责营销职员" style="width: 100%">
                                        <el-select
                                                v-model="formData.headId"
                                                clearable
                                                style="width: 100%"
                                                placeholder="负责营销职员"
                                                @change="listSearch"
                                        >
                                            <el-option
                                                    v-for="(item, idx) in heads"
                                                    :key="item.id"
                                                    :label="item.realName"
                                                    :value="item.id"
                                            />
                                        </el-select>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="6">
                                    <el-form-item label="商销客户名称" style="width: 100%">
                                        <el-input
                                                v-model="formData.sellerName"
                                                placeholder="请输入商销客户名称"
                                        />
                                    </el-form-item>
                                </el-col>

                                <el-col :span="6">
                                    <el-form-item label="创建时间" style="width: 100%">
                                        <date-range-picker
                                                v-model:date="formData.date"
                                                style="width: 100%"
                                                type="daterange"
                                                clearable
                                                range-separator="-"
                                                start-placeholder="开始时间"
                                                end-placeholder="结束时间"
                                        />
                                    </el-form-item>
                                </el-col>
                            </template>

                        </el-row>

                    </el-form>
                    <table-tools>
                        <template #left>
                            <el-button
                                    v-auth="{v:['crm:order:business:pms']}"
                                    class="main-btn"
                                    size="small"
                                    type="primary"
                                    @click="addClick"
                            >新建订单</el-button>
                        </template>
                    </table-tools>
                </div>

                <table-view
                        :visible="visible"
                        :data="tableData"
                        @sort-change="createChange"
                        @row-click="rowClick"
                >
                    <el-table-column
                            prop="order.orderNumber"
                            label="订单编号"
                            fixed="left"
                            width="100"
                            align="center"
                            header-align="center"
                            show-overflow-tooltip
                    />
                    <el-table-column
                            label="商销客户名称"
                            align="left"
                            :min-width="150"
                            header-align="center"
                            prop="order.sellerName"
                            show-overflow-tooltip
                    />
                    <el-table-column
                            label="订单产品"
                            :min-width="150"
                            header-align="center"
                    >
                        <template #default="scope">
                            <product-popor :list="scope.row.orderDetail" />
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="订单总金额（元）"
                            :min-width="150"
                            align="right"
                            header-align="center"
                    >
                        <template #default="scope">
                            <span>{{getTotal(scope.row)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            sortable="custom"
                            label="下单日期"
                            :min-width="120"
                            align="center"
                            header-align="center"
                    >
                        <template #default="scope">
                            {{ dateFormat('yyyy-mm-dd',scope.row.order.putOrderTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="order.headName"
                            label="负责营销职员"
                            :min-width="120"
                            align="center"
                            header-align="center"
                    />
                    <el-table-column
                            sortable="custom"
                            prop="processNo"
                            label="创建时间"
                            :min-width="150"
                            align="center"
                            header-align="center"
                    >
                        <template #default="scope">
                            {{ dateFormat('yyyy-mm-dd HH:MM',scope.row.order.createdAt) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="状态"
                            fixed="right"
                            align="center"
                            :min-width="150"
                            header-align="center"
                    >
                        <template #default="scope">
                            <div class="tab-line">
                                <div>{{ getStatus(scope.row) }}</div>
                                <!--                                <div-->
                                <!--                                        v-if="scope.row.order&&scope.row.order.flowStatus!=='AGREE'&&scope.row.order.flowStatus!=='REFUSE'"-->
                                <!--                                        class="flow-status-color"-->
                                <!--                                >{{ getLabel('approval_result',scope.row.order.flowStatus) }}</div>-->
                            </div>

                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            fixed="right"
                            header-align="center"
                            min-width="200"
                    >
                        <template #default="scope">
                            <div v-if="scope.row.order.flowStatus != 'DOING'">
                                <el-button
                                        v-auth="{v:['crm:order:terminal:pms'],bool:scope.row.order.orderStatus == 2}"
                                        type="text"
                                        @click.stop="onCancel(scope.row)"
                                >取消订单</el-button>
                                <el-button
                                        v-auth="{v:['crm:order:terminal:pms'],bool:scope.row.order.orderStatus == 0 || scope.row.order.orderStatus == 5 || scope.row.order.orderStatus == -1}"
                                        class="delete-text-btn"
                                        type="text"
                                        @click.stop="onDelete(scope.row)"
                                >删除</el-button>
                                <el-button
                                        v-auth="{v:['crm:order:terminal:pms'],bool:scope.row.order.orderStatus == 0 || scope.row.order.orderStatus == -1}"
                                        type="text"
                                        @click.stop="onEdit(scope.row)"
                                >编辑</el-button>

                            </div>

                            <!--                            <el-button type="text">删除</el-button>-->
                        </template>
                    </el-table-column>

                </table-view>

                <Pagination
                        v-model:page="formData.page"
                        v-model:limit="formData.pageSize"
                        style="display: flex; justify-content: flex-end"
                        :total="total"
                        @pagination="getList"
                />

            </div>
        </div>

    </div>
</template>

<script>
    import {isInteger} from "../../../../../../utils/validate";
    import orderList from '../../../../mixins/orderList'
    import {defineComponent, defineAsyncComponent, toRefs} from 'vue'

    export default defineComponent({
        name: 'Index',
        components: {
            productPopor :defineAsyncComponent(()=>import('../../order/list/modules/productPopor.vue'))
        },
        setup() {
            const order = orderList('business')

            const getTotal = (row) => {
                let total = 0
                if (row.orderDetail && row.orderDetail.length){

                    row.orderDetail.forEach(a=>{
                        total += a.totalAmount
                    })
                }
                return total ? isInteger(total) : ''
            }

            return {
                ...toRefs(order),

                getTotal,
            }
        },
    })
</script>

<style scoped>
</style>
